<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSSReg</title>
		<script src="CSSReg.js" type="text/javascript"></script>
		<style type="text/css">
			body {
				font: 62.5%/1.3em "Lucida Grande", verdana, arial, helvetica, sans-serif;
			}	
			#input, #output, #parseTree, #rawOutput {
				width:340px;
				height:200px;
				
			}
			.row {
				display:block;
				width:700px;
			}
			.col {
				width:350px;
				float:left;
			}
		</style>
		<style type="text/css"></style>
		<script type="text/javascript">
			function convert() {
				var start = new Date();
				CSSReg.setAppID('myApplication');
				if(document.getElementById('disablePositioning').checked) {
					CSSReg.disablePositioning = true;	
				} else {
					CSSReg.disablePositioning = false;
				}	
				CSSReg.setDebugObjs({
					'parseTree':function(parseTree) {
						document.getElementById('parseTree').value = parseTree;
					},
					'rawOuput':function(rawOuput) {
						document.getElementById('rawOuput').value = rawOuput;
					}
				});
				document.getElementById('parseTree').value='';
				var output = CSSReg.parse(document.getElementById('input').value);												
				document.getElementById('output').value = output;
				var end = new Date();
				var elapsedTime = (end - start);
				document.getElementById('convertTime').innerHTML = 'Elapsed time:'+ elapsedTime+'ms';
			}
			function clearData() {				
				document.getElementById('rawOutput').value='';
				document.getElementById('parseTree').value='';
				document.getElementById('input').value='';
				document.getElementById('output').value='';				
			}
			function hackTest() {
				document.getElementById('input').value='';
				convert();
			}			
		</script>
	</head>
	<body>
		<img src="images/logo.gif" />
		<fieldset>
			<div class="row">
				<span class="col">
					Input:<br>
					<textarea id="input">color:#FFF;font: italic bold 12pt/14pt Times, serif text-decoration: none :::text-indent: 5em</textarea>
				</span>
				<span class="col">
				Output:<br>
				<textarea id="output"></textarea>
				<br>
					Disable positioning CSS? <input type="checkbox" id="disablePositioning" value="1" checked="checked" /><br /><input type="button" value="Clear" onclick="clearData();" /> <input type="button" value="Hack test" onclick="hackTest();" /><input type="button" value="Convert" onclick="convert();" /> <span id="convertTime"></span>				
				</span>				
			</div>
			<div class="row">
				<span class="col">			
						Parse tree:<br>
						<textarea id="parseTree"></textarea>				
				</span>
				<span class="col">					
						Raw untreated output:<br>
						<textarea id="rawOutput"></textarea>					
				</span>
			</div>
		</fieldset>
	</body>
</html>
